<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>功能</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
      <!-- 样式初始化 自定义文件 -->
      <link rel="stylesheet" href="../css/index.css">
      <!-- 下面所有都是库文件 -->
      <link rel="stylesheet" href="../newtp/lib/weui.min.css">
      <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
      <link rel="stylesheet" href="../newtp/css/theme.css">
      <script src="../newtp/lib/jquery-2.1.4.js"></script>
      <script src="../newtp/lib/fastclick.js"></script>
      <script src="../newtp/js/jquery-weui.js"></script>
<style>
/*最外层*/
.page-container{height: 100%;width: 100%;  overflow: hidden; }
/*顶部*/
.page-top{ height: 50px; top:0; background:#fff; }
.g-back{ float: left; width: 80px;  height: 50px;background: url(../img/g_03.png) center no-repeat; background-size: 18px; }
.g-other{float: right;width: 80px; height: 50px;line-height: 50px; color: #3396fb;}
.t-title{ display:block; line-height: 50px; width: 100%;  text-align: center; }
/*内容容器*/
/*容器内容*/
.page-wrap{ height: 100%; width: 100%; background:#f8f8f8;overflow-y: auto; }
/*常用功能*/
.p-list{ border-bottom: 1px solid #f2f2f2; background: #fff;   }
.p-title{ display: block; padding:0 0 0 17px; height: 44px;width: 100%; }
.p-title .left{height: 100%; line-height: 44px; font-size: 16px; font-weight: bold; color: #4e4e4e; }
.p-title .right{height: 100%; width:44px; line-height: 44px; font-size: 13px;color: #3396fb;   }
.gn-list{ padding-bottom: 10px;  overflow: hidden; }
span.g-left{height: 100%; width: 44px;   }
.gn-list li{ padding:5px 0; float: left; width: 25%; overflow: hidden; }
.gn-list li div{ position: relative; margin:5px auto;  width: 40px; height: 40px; min-height: 30px; margin:5px auto;  }
.gn-list img{ width: 100%; height: 40px; }
.gn-list span{ display: block; width: 100%; text-align: center;font-size: 13px; color: #343434;}
.gn-list a{  position: absolute; top:-7px; right:-7px; width: 18px;height: 18px;border-radius: 50%;line-height: 18px; 
           background: red; color: #fff;text-align: center; font-size: 25px;overflow: hidden;}
/*功能列表*/
.p-list-x{ padding-left: 20px;padding-bottom: 10px; width: 100%;   }
.p-list-x li {padding-left: 7px;  height: 41px; line-height: 41px;  border-bottom: 1px solid #f2f2f2;  }
.p-list-x i{ display: inline-block; width: 20px; height: 20px; vertical-align: middle;  }
.p-list-x img{overflow: hidden; margin:0 7px;  width: 20px; height: 20px; vertical-align: middle;}
.p-list-x .name{line-height: 20px; display:inline-block;  font-size: 13px; color: #343434;overflow: hidden;vertical-align: middle; }
.p-list-x a{float: right; width: 45px; height: 22px; line-height: 22px; text-align: center; margin: 9px 17px;}
.p-list-x .tj::after{display:block;content: "添加";font-size: 12px; color: #1d86f3; border: 1px solid #1d86f3;border-radius: 2px;}
.p-list-x .ytj::after{display:block;content: "已添加";font-size: 12px; color: #636363; }
.p-list-x .disab::after{display:block;content: "添加";font-size: 12px; color: #999; border: 1px solid #efefef;border-radius: 2px;
background: #f2f2f2;}
.xbtn .right{ width: 50px; }      

/*箭头图标*/
.g-left{ background:url(../img/rr_03.png) center no-repeat; background-size: 7px 14px; }
.g-down{ background:url(../img/down_06.png) center no-repeat; background-size: 12px 8px; }
.g-up{ background:url(../img/up_03.png) center no-repeat; background-size: 12px 8px; }
.zhe{ background: url(../img/zhe_07.png) no-repeat;  background-size: 20px 20px; }
/*辅助类*/
.color1{ color: #2bb1ff; }
.color2{ color: #c8c8c8; }
</style>
</head>
<body>
<div class="page-container">
      <div class="weui-tab">
             <!-- 头部 -->
              <div class="weui-navbar page-top">
                      <a  href="javascript:history.back(-1);" class="g-back"></a>                   
                      <span class="t-title">班级总成绩排名</span>  
                      <a  class="g-other" id="top-ok">完成</a>
              </div>
              <!-- 内容区 -->
              <div class="weui-tab__bd page-wrap" >
                    <!-- 我的常用功能 -->
                      <div class="p-list" id="changyong">
                               <!-- 数据动态渲染 -->
                               <!-- <div class="p-title">
                                     <span class="left">常用功能</span>
                                     <a class="right" id="edit">编辑</a>
                               </div>
                               <ul class="gn-list">
                                      <li><div><img src="../img/lgicon/m4.png"><a>-</a></div><span>考勤管理</span></li>
                                      <li><div><img src="../img/lgicon/m8.png"><a>-</a></div><span>请假申请</span></li>
                                      <li><div><img src="../img/lgicon/m9.png"><a>-</a></div><span>会议管理</span></li>
                                      <li><div><img src="../img/lgicon/m49.png"><a>-</a></div><span>工资管理</span></li>
                                      <li><div><img src="../img/lgicon/m22.png"><a>-</a></div><span>学生成长</span></li>
                                      <li><div><img src="../img/lgicon/m23.png"><a>-</a></div><span>教师成长</span></li>
                                      <li><div><img src="../img/lgicon/m48.png"><a>-</a></div><span>成绩查询</span></li>
                                      <li><div><img src="../img/lgicon/m24.png"><a>-</a></div><span>社团管理</span></li>                          
                               </ul> -->
                     </div>

                     <div id="list-all">
                            <!-- 数据动态渲染 -->
                             <!-- <div class="p-list">
                                      <div class="p-title  xbtn">
                                             <span class="left">家校互动</span>
                                             <span class="right g-down"></span>
                                      </div>
                                      <ul class="p-list-x">
                                              <li><i class="zhe"></i><img src="../img/lgicon/m22.png"><span class="name">学生成长</span><a class="right tj"></a></li>
                                              <li><i class="zhe"></i><img src="../img/lgicon/m23.png"><span class="name">教师成长</span><a class="right tj"></a></li>
                                              <li><i class="zhe"></i><img src="../img/lgicon/m48.png"><span class="name">成绩查询</span><a class="right tj"></a></li>
                                              <li><i class="zhe"></i><img src="../img/lgicon/m24.png"><span class="name">社团管理</span><a class="right tj"></a></li>
                                      </ul>
                               </div> -->
                     </div>
             </div>
      </div>
</div>
</body>
<script src="../js/data.js"></script>
<script>
$(function(){             
// 常用功能
      var arr2Html = [];
      $.each(obj.list, function(i,v){
            arr2Html.push('<li><div><img src="'+v.src+'"><a>-</a></div><span>'+v.name+'</span></li>');
      })
      $("#changyong").html(
                       '<div class="p-title">'+
                              '<span class="left">常用功能</span>'+
                              '<a class="right" id="edit">编辑</a>'+
                       '</div>'+
                       '<ul class="gn-list">'+arr2Html.join("") +'</ul>'
      );

      // 渲染数据 所有
      var  arrHtml = [] ;
      $.each(arr, function(i,v){
              var liarr=[];
              $.each(v.list,function(i2,v2){
                    liarr.push(
                      '<li>'+
                         '<i class="zhe"></i>'+
                         '<img src="'+v2.src+'">'+
                         '<span class="name">'+v2.name+'</span>'+
                         '<a class="right tj"></a>'+
                      '</li>'
                   );
              });
              arrHtml.push(
                       '<div class="p-list">'+
                           '<div class="p-title  xbtn">'+
                                  '<span class="left">'+v.title+'</span>'+
                                  '<a class="a right g-down"></a>'+
                           '</div>'+
                           '<ul class="p-list-x">'+ liarr.join('')  + '</ul>'+
                       '</div>'
              )
             $("#list-all").html(  arrHtml.join("") );

              // 下拉效果
              $(".xbtn").click(function(){
                     if($(this).find('.right').hasClass("g-up")){
                           $(this).find('.right').removeClass("g-up").addClass("g-down");
                            $(this).next("ul").slideDown();
                     }else{
                           $(this).find('.right').removeClass("g-down").addClass("g-up");
                           $(this).next("ul").slideUp();
                     }
              });

                // 添加按钮点击效果
              $('.p-list-x').find('a').click(function(){
                   if( $(this).hasClass('tj') && !$(this).hasClass('disab')){
                          $(this).removeClass('tj').addClass("ytj");
                          var url=$(this).parent().find('img').eq(0).attr('src');
                          var li = $('<li><div><img src="'+url+'"><a>-</a></div><span>'+$(this).prev("span").text()+'</span></li>');
                          $('.gn-list').append(li);
                          $('.gn-list').find('a').click(function(){
                              var str = $(this).parent().parent().find("span").text();
                              $(this).parent().parent().remove();
                              csh(str);
                          })
                    }
              })
         })
      // 初始化
      function csh(str){
        var arr = [];
        $('.gn-list').find("span").each(function(i,v){
            arr.push( $.trim(v.innerHTML) );
        })
      	$('.p-list-x').find("span").each(function(i,v){
      		if( $.inArray($.trim(v.innerHTML),arr) !=-1 ){
      			  $(v).parent().find('a').removeClass('tj').addClass('ytj');
      		}else{
              $(v).parent().find('a').removeClass('ytj').addClass('tj');
          }
      	})
      }
      csh('');

    //"完成"
    $('#top-ok').click(function(){
       $('.gn-list').find('a').hide();
       $(this).css("visibility","hidden");
       $('.p-list-x').find('a.tj').removeClass('tj').addClass("disab");
    })
    //'编辑'
    $('#edit').click(function(){
       $('.gn-list').find('a').show();
       $('#top-ok').css("visibility","visible");
       $('.p-list-x').find('a.disab').removeClass("disab").addClass("tj");
    })
    // 图标删除按钮
    $('.gn-list').find('a').click(function(){
    var str = $(this).parent().find("span").text();
    $(this).parent().parent().remove();
    csh(str);
    })

});
</script>
</html>